
<script setup>
	
	import { ref, watch, nextTick } from 'vue';
	
	
	/** props */
	const props = defineProps(['modelValue']);
	
	/** emits */
	const emits = defineEmits(['update:modelValue', 'confirm']);
	
	/** 弹窗实例 */
	const popupRef = ref({});
	
	/** 关闭弹窗 */
	const close = () => {
		popupRef.value?.close?.();
		emits('update:modelValue', false);
	};
	
	watch(() => props.modelValue, show => {
		show ? nextTick(() => popupRef.value?.open?.()) : close();
		
	}, { immediate: true });
	
	
	/** 单词数量 */
	const wordCOunt = ref(50);
	
	
</script>

<template>
	<uv-popup mode="bottom" :safe-area-inset-bottom="false" @mask-click="close" ref="popupRef" round="32rpx">
		<view>
			<view class="flex items-center justify-between pt-30 pb-40 px-30">
				<view class="text-36 font-weight-700">选择词汇数量</view>
				<uv-icon name="close" size="32rpx" @tap="close" />
			</view>
			
			<uv-radio-group v-model="wordCOunt" custom-style="margin: 0 50rpx 0 30rpx" placement="colmun" icon-placement="right" active-color="#0B9AFF">
				<uv-radio :name="10" custom-style="padding: 20rpx 0;border-bottom: 1rpx solid #F0F2F4">10</uv-radio>
				<uv-radio :name="20" custom-style="padding: 20rpx 0;border-bottom: 1rpx solid #F0F2F4">20</uv-radio>
				<uv-radio :name="30" custom-style="padding: 20rpx 0;border-bottom: 1rpx solid #F0F2F4">30</uv-radio>
				<uv-radio :name="40" custom-style="padding: 20rpx 0;border-bottom: 1rpx solid #F0F2F4">40</uv-radio>
				<uv-radio :name="50" custom-style="padding: 20rpx 0;border-bottom: 1rpx solid #F0F2F4">50</uv-radio>
			</uv-radio-group>
			
			
			<view style="padding-bottom: 24rpx">
				<view class="btn mx-30 bgc-primary mt-60" @click="emits('confirm', wordCOunt)">确定</view>
			</view>
		</view>
	</uv-popup>
</template>


<style scoped lang="scss">
	.btn{height:80rpx;border-radius:12rpx;text-align:center;line-height:80rpx;color:#fff;font-size:28rpx}
</style>